<template>
  <div class="debug-environment-container">
    <a-card class="header-card">
      <a-row :gutter="20">
        <a-col :span="8">
          <a-select
            v-model:value="selectedSandbox"
            placeholder="请选择沙箱环境"
            style="width: 100%"
            @change="onSandboxChange"
          >
            <a-select-option value="dev">开发环境</a-select-option>
            <a-select-option value="test">测试环境</a-select-option>
            <a-select-option value="pre">预发布环境</a-select-option>
            <a-select-option value="prod">生产环境</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="8">
          <a-select
            v-model:value="selectedApi"
            placeholder="请选择接口"
            style="width: 100%"
            @change="onApiChange"
          >
            <a-select-option value="user-list">用户列表</a-select-option>
            <a-select-option value="user-create">创建用户</a-select-option>
            <a-select-option value="user-update">更新用户</a-select-option>
            <a-select-option value="user-delete">删除用户</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="8" class="text-right">
          <a-button type="primary" @click="executeRequest">
            <PlayCircleOutlined />
            执行请求
          </a-button>
        </a-col>
      </a-row>
    </a-card>

    <a-row :gutter="20">
      <a-col :span="12">
        <a-card class="request-card">
          <template #title>
            <span>请求配置</span>
          </template>
          <a-form :model="requestForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-form-item label="请求方法">
              <a-select v-model:value="requestForm.method">
                <a-select-option value="GET">GET</a-select-option>
                <a-select-option value="POST">POST</a-select-option>
                <a-select-option value="PUT">PUT</a-select-option>
                <a-select-option value="DELETE">DELETE</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="请求地址">
              <a-input v-model:value="requestForm.url" placeholder="请输入请求地址" />
            </a-form-item>
            <a-form-item label="请求头">
              <a-button @click="addHeader" type="dashed" style="width: 100%">
                <PlusOutlined />
                添加请求头
              </a-button>
              <div v-for="(header, index) in requestHeaders" :key="index" class="header-item">
                <a-row :gutter="10">
                  <a-col :span="10">
                    <a-input v-model:value="header.key" placeholder="键" />
                  </a-col>
                  <a-col :span="10">
                    <a-input v-model:value="header.value" placeholder="值" />
                  </a-col>
                  <a-col :span="4">
                    <a-button type="link" @click="removeHeader(index)">删除</a-button>
                  </a-col>
                </a-row>
              </div>
            </a-form-item>
            <a-form-item label="请求参数">
              <a-tabs v-model:activeKey="paramTab">
                <a-tab-pane key="1" tab="Params">
                  <a-button @click="addParam" type="dashed" style="width: 100%">
                    <PlusOutlined />
                    添加参数
                  </a-button>
                  <div v-for="(param, index) in requestParams" :key="index" class="param-item">
                    <a-row :gutter="10">
                      <a-col :span="10">
                        <a-input v-model:value="param.key" placeholder="参数名" />
                      </a-col>
                      <a-col :span="10">
                        <a-input v-model:value="param.value" placeholder="参数值" />
                      </a-col>
                      <a-col :span="4">
                        <a-button type="link" @click="removeParam(index)">删除</a-button>
                      </a-col>
                    </a-row>
                  </div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="Body">
                  <a-select v-model:value="bodyType" style="margin-bottom: 10px">
                    <a-select-option value="form-data">Form Data</a-select-option>
                    <a-select-option value="json">JSON</a-select-option>
                    <a-select-option value="raw">Raw</a-select-option>
                  </a-select>
                  <div v-if="bodyType === 'json'">
                    <a-textarea
                      v-model:value="requestBody"
                      placeholder="请输入JSON格式数据"
                      :rows="6"
                    />
                  </div>
                  <div v-else-if="bodyType === 'form-data'">
                    <a-button @click="addFormData" type="dashed" style="width: 100%">
                      <PlusOutlined />
                      添加表单数据
                    </a-button>
                    <div v-for="(data, index) in formDataList" :key="index" class="form-data-item">
                      <a-row :gutter="10">
                        <a-col :span="10">
                          <a-input v-model:value="data.key" placeholder="键" />
                        </a-col>
                        <a-col :span="10">
                          <a-input v-model:value="data.value" placeholder="值" />
                        </a-col>
                        <a-col :span="4">
                          <a-button type="link" @click="removeFormData(index)">删除</a-button>
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                  <div v-else>
                    <a-textarea
                      v-model:value="requestBody"
                      placeholder="请输入原始数据"
                      :rows="6"
                    />
                  </div>
                </a-tab-pane>
              </a-tabs>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card class="response-card">
          <template #title>
            <span>响应结果</span>
          </template>
          <div class="response-header">
            <a-tag :color="responseStatus >= 200 && responseStatus < 300 ? 'success' : 'error'">
              Status: {{ responseStatus }}
            </a-tag>
            <span class="response-time">Time: {{ responseTime }}ms</span>
          </div>
          <a-tabs v-model:activeKey="responseTab">
            <a-tab-pane key="1" tab="Body">
              <pre class="response-body">{{ responseBody }}</pre>
            </a-tab-pane>
            <a-tab-pane key="2" tab="Headers">
              <pre class="response-headers">{{ responseHeaders }}</pre>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { PlayCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

export default {
  name: 'DebugEnvironment',
  components: {
    PlayCircleOutlined,
    PlusOutlined
  },
  data() {
    return {
      selectedSandbox: undefined,
      selectedApi: undefined,
      paramTab: '1',
      responseTab: '1',
      bodyType: 'json',
      responseStatus: 200,
      responseTime: 120,
      responseBody: '{\n  "code": 200,\n  "message": "success",\n  "data": []\n}',
      responseHeaders: 'Content-Type: application/json\nContent-Length: 1234',
      requestForm: {
        method: 'GET',
        url: ''
      },
      requestHeaders: [
        { key: 'Content-Type', value: 'application/json' }
      ],
      requestParams: [],
      requestBody: '',
      formDataList: [],
      mockResponse: {
        status: 200,
        time: 120,
        body: '{\n  "code": 200,\n  "message": "success",\n  "data": []\n}',
        headers: 'Content-Type: application/json\nContent-Length: 1234'
      }
    };
  },
  methods: {
    onSandboxChange(value) {
      message.info(`切换到沙箱环境: ${value}`);
    },
    onApiChange(value) {
      message.info(`选择接口: ${value}`);
    },
    executeRequest() {
      message.success('请求执行成功');
      // 模拟响应数据更新
      this.responseStatus = this.mockResponse.status;
      this.responseTime = this.mockResponse.time;
      this.responseBody = this.mockResponse.body;
      this.responseHeaders = this.mockResponse.headers;
    },
    addHeader() {
      this.requestHeaders.push({ key: '', value: '' });
    },
    removeHeader(index) {
      this.requestHeaders.splice(index, 1);
    },
    addParam() {
      this.requestParams.push({ key: '', value: '' });
    },
    removeParam(index) {
      this.requestParams.splice(index, 1);
    },
    addFormData() {
      this.formDataList.push({ key: '', value: '' });
    },
    removeFormData(index) {
      this.formDataList.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.debug-environment-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.request-card,
.response-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.text-right {
  text-align: right;
}

.header-item,
.param-item,
.form-data-item {
  margin-top: 10px;
}

.response-header {
  margin-bottom: 15px;
}

.response-time {
  margin-left: 15px;
}

.response-body,
.response-headers {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
}
</style>